<!-- 顶部导航 -->
<nav class="bg-white border-b sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center h-16 justify-between w-full">
            <!-- 左侧: Logo + 菜单 -->
            <div class="flex items-center space-x-8">
                <!-- Logo -->
                <a href="/" class="flex items-center group">
                    <div class="flex items-center space-x-3">
                        <img src="/images/logo.png" alt="<%= locals.site?.site_name || 'InfoSphere' %>" class="h-10 w-auto transition-transform duration-300 group-hover:scale-110">
                        <span class="text-2xl font-bold text-gray-800"><%= locals.site?.site_name || 'InfoSphere' %></span>
                    </div>
                </a>

                <!-- 桌面端菜单 -->
                <div class="hidden md:flex items-center space-x-6">
                    <%- include('../../components/nav', { href: '/', text: '首页', icon: 'fas fa-home' }) %>
                    <%- include('../../components/nav', { href: '/explore', text: '发现', icon: 'fas fa-globe' }) %>
                </div>
            </div>

            <!-- 右侧用户操作区域 -->
            <div class="hidden md:flex items-center space-x-4">
                <% if (typeof isAuthenticated !== 'undefined' && isAuthenticated && user) { %>
                    <!-- 已登录用户 -->
                    <div class="relative group">
                        <button class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-50 transition-colors duration-200">
                            <%- include('../../components/avatar', { user: user, size: 'w-8 h-8', classes: 'rounded-full border border-gray-200' }) %>
                            <span class="text-gray-700 font-medium">
                                <%= user.username %>
                            </span>
                            <i class="fas fa-chevron-down text-gray-500 text-sm"></i>
                        </button>

                        <!-- 下拉菜单 -->
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-100 py-2 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 z-50">
                            <div class="px-4 py-2 border-b border-gray-100">
                                <p class="text-sm font-medium text-gray-900"><%= user.name || user.username %></p>
                                <p class="text-sm text-gray-500">@<%= user.username %></p>
                            </div>

                            <a href="/user/profile" class="my-2 flex items-center px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                                <i class="fas fa-user mr-3 text-sm"></i>
                                个人资料
                            </a>

                            <a href="/book/<%= user.username %>" class="my-2 flex items-center px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                                <i class="fas fa-book mr-3 text-sm"></i>
                                我的书籍
                            </a>

                            <a href="/auth/logout" class="mt-2 flex items-center px-4 py-2 text-red-600 hover:bg-red-50 transition-colors duration-200">
                                <i class="fas fa-sign-out-alt mr-3 text-sm"></i>
                                退出登录
                            </a>
                        </div>
                    </div>
                <% } else { %>
                    <%- include('../../components/button', { href: '/auth/login', text: '登录', variant: 'outline', icon: 'fas fa-sign-in-alt', className: '!py-2 px-5' }) %>
                    <%- include('../../components/button', { href: '/', text: '开始使用', className: '!py-2 px-5' }) %>
                <% } %>
            </div>

            <!-- 移动端菜单按钮 -->
            <div class="flex md:hidden">
                <button type="button"
                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-blue-600 hover:bg-gray-100 transition-colors duration-200"
                        onclick="toggleMobileMenu()">
                    <i id="menu-icon" class="fas fa-bars text-xl"></i>
                    <i id="close-icon" class="fas fa-times text-xl !hidden"></i>
                </button>
            </div>
        </div>

        <!-- 移动端菜单内容 -->
        <div class="hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 border-t border-gray-200 bg-white">
                <%- include('../../components/nav', { href: '/', text: '首页', icon: 'fas fa-home', className: 'w-full justify-start px-3 py-3 text-base' }) %>
                <%- include('../../components/nav', { href: '/explore', text: '发现', icon: 'fas fa-globe', className: 'w-full justify-start px-3 py-3 text-base' }) %>
            </div>
            <div class="px-2 py-3 border-t border-gray-200 space-y-2">
                <% if (typeof isAuthenticated !== 'undefined' && isAuthenticated && user) { %>
                    <!-- 移动端已登录用户 -->
                    <div class="flex items-center px-3 py-2 mb-2">
                        <img src="<%= user.avatar %>" alt="<%= user.username %>" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <p class="text-sm font-medium text-gray-900"><%= user.name || user.username %></p>
                            <p class="text-xs text-gray-500">@<%= user.username %></p>
                        </div>
                    </div>

                    <a href="/user/profile" class="my-2 flex items-center px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                        <i class="fas fa-user mr-3 text-sm"></i>
                        个人资料
                    </a>

                    <a href="/book/<%= user.username %>" class="my-2 flex items-center px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                        <i class="fas fa-book mr-3 text-sm"></i>
                        我的书籍
                    </a>

                    <a href="/auth/logout" class="mt-2 px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg flex items-center transition-colors duration-200">
                        <i class="fas fa-sign-out-alt mr-2 text-sm"></i>
                        退出登录
                    </a>
                <% } else { %>
                    <%- include('../../components/button', { href: '/auth/login', text: '登录', variant: 'outline', icon: 'fas fa-sign-in-alt', className: 'w-full py-3 px-4 justify-center' }) %>
                    <%- include('../../components/button', { href: '/', text: '开始使用', className: 'w-full py-3 px-4 justify-center' }) %>
                <% } %>
            </div>
        </div>
    </div>
</nav>

<script>
    function toggleMobileMenu() {
        const menu = document.getElementById('mobile-menu')
        const menuIcon = document.getElementById('menu-icon')
        const closeIcon = document.getElementById('close-icon')

        if (menu.classList.contains('hidden')) {
            menu.classList.remove('hidden')
            menuIcon.classList.add('!hidden')
            closeIcon.classList.remove('!hidden')
        }
        else {
            menu.classList.add('hidden')
            menuIcon.classList.remove('!hidden')
            closeIcon.classList.add('!hidden')
        }
    }
</script>